<template>
  <el-card
    class="question-card"
    @click="enterComment(item)"
  >
    <div class="card-header">
      <img
        :src="require('@/assets/img/avatar.png')"
        alt="thumbnail"
        class="card-thumbnail"
      />
      <span class="card-title">神秘人</span>
    </div>
    <h3 class="card-content">{{ item.title }}</h3>
    <p class="question-details">{{truncatedContent}}</p>
    <div class="question-time">{{item.tim}}</div>
    <div class="card-footer">
      <div class="card-footer-container">
        <p>{{ item.views }}</p>
        <el-icon>
          <View />
        </el-icon>
      </div>
      <div class="card-footer-container">
        <p>{{ item.comments }}</p>
        <el-icon>
          <Comment />
        </el-icon>
      </div>
      <div
        class="card-footer-container"
        @click.stop="toggleLike(item)"
      >
        <p :style="{ color: item.liked ? 'red' : 'black'}">{{ item.lik }}</p>
        <el-icon :style="{ color: item.liked ? 'red' : 'black' }">
          <Star />
        </el-icon>
      </div>
    </div>
  </el-card>
</template>

<script>
import { useRouter } from 'vue-router';
import { put } from "@/net";
import { useAccountStore } from "@/store";
export default {
  name: 'questioncard',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  computed: {
    truncatedContent () {
      const maxLength = 18;
      return this.item.content.length > maxLength
        ? this.item.content.slice(0, maxLength) + "..."
        : this.item.content;
    },
  },
  setup () {
    const store = useAccountStore();
    const router = useRouter();
    const enterComment = (item) => {
      // 跳转到提问箱页面，并传递提问箱的 ID
      router.push({
        name: 'comment',  // 路由名称，假设你已经在 Vue Router 中定义了这个路由
        params: { id: item.id }     // 传递 id 作为参数
      });
    };
    const toggleLike = (item) => {
      if (!item.liked) {
        item.lik += 1;
        item.liked = true; // 标记为已点赞
      } else {
        item.lik -= 1;
        item.liked = false; // 取消点赞
      }
      put('/question_info/like', { qid: item.id, aid: store.account.id }, (message) => {
        console.log(message.msg);
      });
      post('/message_info/add_message', { receiver_id: item.id, sender_id: store.account.id, tex: "点赞了一条提问", message_type: 1 }, (message) => {
        console.log(message.msg);
      });
    };
    return {
      enterComment, toggleLike
    };
  }
};
</script>

<style scoped>
.question-card {
  width: 100%;
  min-width: 100%;
  min-height: 150px;
  height: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 10px 0;
  padding: 15px;
  box-shadow: var(--color-post-card-box-shadow) 0 3px 8px;
  transition: all 0.5s;
}
.question-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card-header {
  --userImage: 50px;
  width: 100%;
  height: 30px;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.card-thumbnail {
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin-right: 8px;
}

.card-title {
  font-size: 1.2em;
  font-weight: bold;
}

.card-content {
  margin: 0px;
}

.question-details {
  font-size: 16px;
  color: #666;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.question-time {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-footer-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 4px; /* 控制文字和图标之间的间距 */
}

.card-footer-container p {
  margin: 0; /* 去掉默认的段落外边距 */
}

.card-footer-container el-icon {
  transition: color 0.3s ease; /* 添加平滑过渡效果 */
}

.card-footer {
  display: flex;
  justify-content: space-around;
  /* margin-top: 10px; */
  margin: 0;
}
</style>